<template>
  <div>
    <div>
      <el-divider />
      <el-row style="margin-bottom: 10px">
        <el-col :span="8">
          <el-input v-model.trim="queryName" clearable placeholder="请输入脚本名称" />
        </el-col>
        <el-button
          class="filter-item"
          size="mini"
          style="margin-left: 5px"
          type="success"
          icon="el-icon-search"
          @click="toQuery"
        >搜索
        </el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
        </el-button>
      </el-row>
      <el-table :data="form.publishScriptList" border max-height="240">
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="scriptName" label="脚本名称" />
        <el-table-column label="依赖节点">
          <template slot-scope="scope">
            <el-select v-model="scope.row.processFileID" clearable multiple placeholder="请选择" :disabled="processStep < form.publishStauts" filterable>
              <el-option
                v-for="item in processFileList"
                :key="item.outputValue"
                :label="item.fileName"
                :value="item.outputValue"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import publishTaskProcessFileApi from '@/api/golive/alibabaPublish/publishTaskProcessFile'

export default {
  name: 'CreateFile',
  model: {
    prop: 'form',
    event: 'changes'
  },
  props: {
    form: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      processStep: 1,
      queryName: null,
      processFileList: [],
      tempScriptList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      const param = {
        'deployTaskPkId': this.form.pkId
      }
      publishTaskProcessFileApi.findProcessFile(param).then(data => {
        this.processFileList = data
      }).catch(() => {
        this.crud.notify('获取依赖文件节点失败！', 'error')
      })
    },
    toQuery() {
      if (this.queryName === undefined || this.queryName === null || this.queryName === '') {
        this.resetQuery()
      } else {
        this.tempScriptList = JSON.parse(JSON.stringify(this.form.publishScriptList))
        this.form.publishScriptList = this.form.publishScriptList.filter((item) => {
          return item.scriptName.toUpperCase().includes(this.queryName.toUpperCase())
        })
      }
    },
    resetQuery() {
      this.queryName = null
      if (this.tempScriptList !== undefined && this.tempScriptList.length > 0) {
        this.form.publishScriptList = JSON.parse(JSON.stringify(this.tempScriptList))
        this.tempScriptList = []
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 400px !important;
}

::v-deep .bordered-button {
  border: #92dab3 2px;
}

::v-deep .el-transfer__buttons button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::v-deep .el-transfer__buttons button:last-child {
  margin-left: 0px;
}
</style>
